<template>
  <div class="base-dialog-wrapper">
    <el-dialog
      title="外层 Dialog"
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="outerVisible"
    >
      <!-- 内层的dialog -start- -->
      <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body>
        <div slot="footer" class="dialog-inner-footer">
          <el-button @click="innerClose">取 消</el-button>
          <el-button type="primary" @click="innerSure">确认提交</el-button>
        </div>
      </el-dialog>
      <!-- end -->

      <el-form :label-position="labelPosition" label-width="80px" :model="formData">
        <el-form-item label="作者">
          <el-input v-model="formData.author"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker v-model="formData.createTime" type="date" placeholder="选择创作日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="formData.content"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="outerClose">取 消</el-button>
        <el-button type="primary" @click="outerSure">打开内层 Dialog</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
// props 事件
export default {
  data() {
    return {
      formData: {
        author: "",
        title: "",
        createTime: "",
        content: ""
      },
      labelPosition: "left"
    };
  },
  props: {
    outerVisible: {
      type: Boolean,
      default: false
    },
    innerVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    outerClose() {
      this.$emit("outerClose");
    },
    outerSure() {
      this.$emit("outerSure");
    },
    innerClose() {
      this.$emit("innerClose");
    },
    innerSure() {
      this.formData.createTime = moment(this.formData.createTime).format(
        "YYYY-MM-DD"
      );
      this.$emit("innerSure", this.formData);
    }
  }
};
</script>